<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="/struts-tags" prefix="s"%>
<html>
<head>
 <script type="text/javascript" src="/js/fmas.js"></script>  
 <script type="text/javascript">  
  function selectCategoryies(){
  	return !$('#category option:selected').remove().appendTo('#selectedCategory'); 
  } 
 
  function removeCategories(){
  	return !$('#selectedCategory option:selected').remove().appendTo('#category'); 
  }

  jQuery.fn.manageBusinessContact = function(jqContactClassNames, names, propertyName, canbeDelete){
	  var contactInfo = $(this);
	  var addContact = $('.jqAddContact', contactInfo);
	  var jqContactClassNames = jqContactClassNames;
	  var propertyName = propertyName;
	  var canBeDelete = canbeDelete;
	  var contactRemoveMessage = "Do you want remove contact";
	  var form = $($("input", contactInfo).get(0).form);
	  var contactInfoDummyRow = $('.jqBusinessContact[type=dummy]', contactInfo);
	  addContact.click(function(){
		  var row = contactInfoDummyRow.clone();
		  row.attr('type', 'active');
		    row.show();
		    $('a.jqDelContact', row).click(function() {
		    	if (confirm(contactRemoveMessage)) {
			        row.remove();
			      }
			    });
		    row.insertBefore($('.jqBusinessContact[type=dummy]', contactInfo));
		  });

	  form.submit(function() {
		    $('.jqBusinessContact[type=active]', contactInfo).each(function(index) {
		      var row = $(this);
		      for (var i = 0; i < jqContactClassNames.length; i++) {
		    	  if(propertyName){
		    		  $('.' + jqContactClassNames[i], row).attr('name', propertyName + '[' + index + '].' + names[i]);
		    	  } else {
		        $('.' + jqContactClassNames[i], row).attr('name', 'businessDetailsDTO.contactList[' + index + '].' + names[i]);
		      }
		      }
		    });
		  });
	    
	  }
  
  $(document).ready(function() { 
	   $.ajaxSettings.traditional = true; 
	   $('#state').change(function(e){
		   	$.ajax({
				type:"GET",
				url: "businessDetails.html",
				data: { id : $('#state option:selected').val() , ind : 'CITY' },
				contentType:"application/json,charset=utf-8",
				dataType:"json",
				success:function(response){
					$('#city').find('option').remove();
					$('#locality').find('option').remove();
					$('#city').append('<option value="">Select City</option>');
					$('#locality').append('<option value="">Select Locality</option>');
					$.each(response, function(key,value){
						$('#city').append('<option value="' + value.cityId + '">' + value.cityName + '</option>');
					});
				}
			});
	   });
	   $('#city').change(function(e){
	   		$.ajax({
			type:"GET",
			url:"businessDetails.html",
			data: { id : $('#city option:selected').val() , ind : 'LOCALITY' },
			contentType:"application/json,charset=utf-8",
			dataType:"json",
			success:function(response){
					$('#locality').find('option').remove();
					$('#locality').append('<option value="">Select Locality</option>');
					$.each(response, function(key,value){
						$('#locality').append('<option value="' + value.localityId + '">' + value.localityName + '</option>');
					});
				}
			});
	   });
	   var jqClassNames = ['jqContactType','jqContactDetails', 'jqPrimary', 'jqContactId', 'jqStatus'];
		var names = ['conType', 'contactDetails', 'primary', 'id', 'status'];
		$('#jqContactInfoTable').manageBusinessContact(jqClassNames, names, 'businessDetailsDTO.contactList', true);
   });
	  
	function addNewRow(){
		var newRow = $("#templateRow").clone();
		newRow.children('#tempConType').attr('name','businessDetailsDTO.contact');
		newRow.children('#tempConDet').attr('name','businessDetailsDTO.contactDetails');
		newRow.children('#tempIsPrimary').attr('name','businessDetailsDTO.primary');		
		newRow.removeAttr("id").appendTo( $("#templateRow").parent());
	}
 </script>  
 <style type="text/css">
 	.formTable{
 		font-family: sans-serif;
 		font-size: 12px;
 	}
	.selected{
		background-color: red;
	}
	table tr th{
		text-align: left;
		font-family: sans-serif;
		font-size: 12px;
	}
	table tr td{
		font-family: sans-serif;
		font-size: 12px;
		padding: 5 5 5 5px;
	}
	select{
		width : 200px;
		
		font: 11px;
		font-family: sans-serif;
		border: 1px solid rgb(133,180,12);
	}
	input{
		font: 11px;
		font-family: sans-serif;
		border: 1px solid rgb(133,180,12);
	}
	legend {
		font-weight: bold;
		font-family: fantasy;
	}
	#templateRow{
		display: none;
	}
 </style>
</head>
<body>
<form action="saveBusiness.html" method="post">
<s:hidden name="businessDetailsDTO.businessId"></s:hidden>
<table width="100%" border="0" bordercolor="green" class="formTable">
	<tr>
		<td width="20%" style="vertical-align: top;">
			<ul style="list-style: none;">
				<li class="selected"><s:a id="businessBasic" href="/admin/business/businessBasic">Business Basic Page</s:a></li>
				<li><s:a id="productAsscociation" href="/admin/buiness/productAsscociation">Product Page</s:a></li>
				<li><s:a id="businessBasic" href="/admin/business/brandAssociation">Brand Page</s:a></li>
			</ul>
		</td>
	</tr>
	<tr>
		<td>
			<table>
				<tr>
					<td>
						<fieldset style="width: 1000px;">
							<legend  style="font: bold;">Details</legend>
							<table border="0" bordercolor="red">
								<tr>
									<th>Name</th>
									<td colspan="5">
										<s:textfield name="businessDetailsDTO.businessName" label="Name" size="80"></s:textfield>
										<s:fielderror fieldName="field.business.name" cssClass="error" theme="simple"></s:fielderror>
									</td>
								</tr>
								<tr>
									<th><s:text name="getText('field.address.line3')"></s:text></th>
									<td>
										<s:textfield name="businessDetailsDTO.address1" size="50"></s:textfield>
										<s:fielderror fieldName="field.address.line1"></s:fielderror>
									</td>
									<th>Address(Line2)</th><td><s:textfield name="businessDetailsDTO.address2" size="50"></s:textfield></td>
									
								</tr>
								<tr>
									<th>Address(Line3)</th><td><s:textfield name="businessDetailsDTO.address3" size="50"></s:textfield></td>
									<th>Pin Code</th>
									<td colspan="3">
										<s:textfield name="businessDetailsDTO.pinCode" label="Pin" size="50"></s:textfield>
										<s:fielderror fieldName="field.pincode" cssClass="error"></s:fielderror>
									</td>
								</tr>
								<tr>
									<td colspan="4">
										<table>
											<tr>
												<th>State</th><td><s:select id="state" name="businessDetailsDTO.state" list="stateList" listKey="id"
																listValue="name" headerValue="Select State" headerKey=""></s:select></td>
												<th>City</th><td><s:select id="city" name="businessDetailsDTO.city" list="cityList" listKey="cityId" listValue="cityName" 
														headerValue="Select City" headerKey=""></s:select></td>
												<th>Locality</th><td><s:select id="locality" name="businessDetailsDTO.localityId" list="localityList" listKey="localityId" 
																listValue="localityName" headerValue="Select Locality" headerKey=""></s:select>
																<s:fielderror fieldName="field.locality" cssClass="error"></s:fielderror>
																</td>
											</tr>											
										</table>
									</td>
								</tr>
							</table>
						</fieldset>
					</td>
				</tr>
				<tr style="height: 25px"></tr>				
				<tr>
					<td>
						<fieldset  style="width: 1000px;">
							<legend style="font: bold;">Contact</legend>
							<table id="jqContactInfoTable">
							<tr>
							<th colspan="2"></th><td colspan="4"><s:fielderror fieldName="isPrimary" cssClass="error"></s:fielderror></td>
							</tr>
							<s:iterator value="businessDetailsDTO.contactList" var="contact" status="counter">
								<tr type="active" class="jqBusinessContact">
								    <s:hidden cssClass="jqContactId" name="businessDetailsDTO.contactList[%{#counter.count-1}].id" value="%{#contact.id}"></s:hidden>
									<th>Contact Type</th><td><s:select label="Contact Type" name="businessDetailsDTO.contactList[%{#counter.count-1}].conType" value="%{#contact.conType}" list="#{'PHONE':'Phone','MOBILE':'Mobile' ,'EMAIL':'Email', 'FAX':'Fax', 'TOLL-FREE':'Toll-Free', 'TELE-FAX':'Tele-Fax'}" 
													headerValue="Select Contact" headerKey="" cssClass="jqContactType"></s:select>
													<s:fielderror cssClass="error"><s:param>contactType_<s:property value="%{#counter.count-1}"/></s:param> </s:fielderror>
													</td>
									<th>Contact Details</th><td><s:textfield label="Contact Details" name="businessDetailsDTO.contactList[%{#counter.count-1}].contactDetails" value="%{#contact.contactDetails}" cssClass="jqContactDetails"></s:textfield>
									<s:fielderror cssClass="error"><s:param>contact_<s:property value="%{#counter.count-1}"/></s:param> </s:fielderror>
									</td>
									<th>Is Primary</th><td><s:select list="#{'true':'Yes','false':'No'}" name="businessDetailsDTO.contactList[%{#counter.count-1}].primary" value="%{#contact.primary}"  
													headerKey="" headerValue="Is Primary" cssClass="jqPrimary" ></s:select></td>
									<th>Status</th>
									<td><s:select id="status" list="statuses" name="businessDetailsDTO.contactList[%{#counter.count-1}].status" 
													listValue="displayValue" headerKey="" headerValue="Select Status" cssClass="jqStatus" 
													value="%{#contact.status}" cssStyle="width:70px;"></s:select>
													<s:fielderror cssClass="error"><s:param>status_<s:property value="%{#counter.count-1}"/></s:param> </s:fielderror>
													</td>				
													
								</tr>
							</s:iterator>
								
								<tr id="templateRow" class="jqBusinessContact" type="dummy" style="display:none">
									<th>Contact Type</th><td><s:select label="Contact Type" id="tempConType" list="#{'PHONE':'Phone','MOBILE':'Mobile' ,'EMAIL':'Email', 'FAX':'Fax', 'TOLL-FREE':'Toll-Free', 'TELE-FAX':'Tele-Fax'}"
													headerValue="Select Contact" headerKey="" cssClass="jqContactType"></s:select></td>
									<th>Contact Details</th><td><s:textfield id="tempConDet" cssClass="jqContactDetails"></s:textfield></td>
									<th>Is Primary</th><td><s:select id="tempIsPrimary" list="#{'true':'Yes','false':'No'}"
													headerKey="" headerValue="Is Primary" cssClass="jqPrimary"></s:select></td>
									<th>Status</th>
									<td><s:select id="status" cssStyle="width:70px;" list="statuses" headerKey="" headerValue="Select Status" listValue="displayValue" cssClass="jqStatus"></s:select></td>				
													<td><a href="javascript:void(0);" class="jqDelContact">Delete</a></td>
								</tr>
								<tr>
									<th colspan="4"><a href="javascript:void(0);" class="jqAddContact">Add More</a></th>
									<td colspan="4"></td>
								</tr>
							</table>
						</fieldset>
					</td>
				</tr>
				<tr style="height: 25px"></tr>
				<tr>
					<td>
						<fieldset  style="width: 1000px;">
							<legend  style="font: bold;">Categories</legend>
							<div style="width:630px; clear:left;">
								<div style="float:left;">
									<select size="9" id="existingCategy" multiple="multiple">
										<s:iterator value="categoryList" var="cat">
											<option value='<s:property value="#cat.id"/>'><s:property value="#cat.name"/></option>
										</s:iterator>  							
									</select>
								</div>
									<div class="addOrRem" style="float:left;">
									<script type="text/javascript">
											new TransferSelectOptions("existingCategy", "selectedCategory");
										</script>
									</div>
								<div style="float:left;">
									<select name="businessDetailsDTO.selectedCategory" size="9" multiple="multiple" id="selectedCategory">
										<s:iterator value="selectedCategories" var="selectedCat">
											<option value='<s:property value="#selectedCat.id"/>'><s:property value="#selectedCat.name"/></option>
										</s:iterator>  								
									</select>
								</div>
							</div>							
						</fieldset>
					</td>
				</tr>
				<tr>
					<td style="width: 60%;text-align: right;"><s:submit value="Save & Continue"></s:submit></td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</form>
</body>
</html>
